<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .container{
            width: 220px;
            display: flex;
            flex-wrap: wrap;
        }
        .box{
            width: 20px;
            height: 20px;
            border: 1px solid green;
        }
        .current{
            background: palegreen;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-for="(item,i) in list" class="container">
            <div :class="currentSelect.x===i&&currentSelect.y===index?'current':''" class="box"
                v-for="(data,index) in item" @click="currentHandle(i,index)">

            </div>
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el: "#app", //必填项，用来进行绑定
        //用来存放数据
        data() {
            return {
                // 定义list数组
                list: [

                ],
                // 用来存放当前需要显示的数据
                currentData: [],
                currentSelect: {
                    x: 0,
                    y: 0
                }
            }
        },
        created() {
            //循环变量

            for (let i = 0; i < 10; i++) {
                let data = []
                for (let j = 0; j < 10; j++) {
                    data.push(
                        {
                            x: i,
                            y: j
                        }
                    )
                }
                this.list.push(data)
            }

            console.log(this.list)


        },
        //用来存放方法
        methods: {
            currentHandle(x, y) {
                this.currentSelect = this.list[x][y]
                console.log(this.list[x][y])
                console.log("当前你选择的座位为：" + x + "排-" + y + "座位")
            }
        }
    })

</script>